<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内盒模型位置调整</title>
    <style>
         .box{
            width: 400px;
            height: 300px;
            background: aqua;
            margin: 20px;
            border: 2px black solid;
            font-family: '海韵',serif;
            /* 设置行间距 */
            /* 
                行高 专门控制行内元素的间距
                行高就是单行文字的高度

                行高的计算方式：(行高-字体大小)/2=单边行间距
            */
            line-height: 30px;
            
         /* 
        行内盒模型的高度都是以基线对齐
            行内盒模型水平方向排列的布局流程
            首先计算行内最高盒模型计算出行框的高度，然后找到行内盒模型里面最高基线的位置，
            让其他行内盒模型里面所有的元素都以他对齐。
         */
         }
         span{
            font-size: 50px;
            vertical-align: middle;
         }
         b{

         }
         em{

         }
         img{
            /* 
            设置基线位置
                baseline 默认值，文本基线
                middle 文本中线对齐
                top 行框顶部对齐
                bottom 行框底部对齐

                也可以设置具体的值
                通过单位值调整基线的位置
                负数基线向上移动，正数基线向下移动。
            */
            vertical-align: middle;
         }
         @font-face {
            font-family: '海韵';
            src: url('../../front/迷你简海韵.ttf');
        }

    </style>
</head>
<body>
    <div class="box">
        <span>
            流萤
        </span>
        <b>
            知更鸟
        </b>
        <em>
            星
        </em>
        <img src="http://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/kyVXjobrydAwsnp.jpg!a-3-540x.jpg" height="100px">
    </div>
</body>
</html>